<template>
  <div class="InformationList">
    <div class="flex location-wrap" style="height:21px">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>应急指挥部</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row justify="start" style="margin-top:40px;flex:1;overflow: hidden;">
      <el-col :span="9" style="margin-right:30px;height:100%;overflow: scroll;">
        <div class="left">
          <p class="title">{{ title }}</p>
          <el-collapse v-show="list.length > 0" style="margin-top:35px" accordion v-model="activeNames"
            @change="handleChange">
            <el-collapse-item v-for="(item, index) in list" :key="index" :name="item.headquartersLv">
              <template slot="title">
                <img class="operation" v-if="![item.headquartersLv, item.commandUsers[0].id].includes(active)" id="btn2"
                  src="../../../assets/img/add.png" alt="" />
                <img class="operation" v-else-if="[item.headquartersLv, item.commandUsers[0].id].includes(active)"
                  id="btn2" src="../../../assets/img/reduc.png" alt="" />
                <div class="line"></div>
                <div class="first_cross_fold" :class="num === item.headquartersLv ? 'bgc' : 'bgc1'"
                  @click="changeNm(1, item.headquartersLv, item)">{{ item.headquartersLvName }}</div>
              </template>
              <div>
                <div style="display:flex;align-items: center;margin-top: 10px;">
                  <!-- <img class="operation" v-if="![item.commandUsers[0].id].includes(active)" id="btn3" src="../../../assets/img/add.png" alt="" />
                  <img class="operation" v-else-if="[item.commandUsers[0].id].includes(active)" id="btn3" src="../../../assets/img/reduc.png" alt="" /> -->
                  <!-- <img class="operation" id="btn3" src="../../../assets/img/reduc.png" alt="" /> -->
                  <div class="line1"></div>
                  <div class="first_cross_fold" @click="changeNm(2, item.commandUsers[0].id, item.commandUsers)"
                    :class="num === item.commandUsers[0].id ? 'bgc' : 'bgc1'">指挥人员</div>
                </div>
                <div class="third_box" style="margin-top:20px">
                  <div class="vertical_fold" v-for="(i, j) in item.commandGroups" :key="j" @click="changeNm(3, j, i)"
                    :class="num === (j) ? 'bgc' : 'bgc1'"
                    :style="{ width: item.headquartersLv === '0' ? '50px' : '33px', 'font-size': item.headquartersLv === '0' ? '16px' : '14px' }">
                    {{ i.workGroup }}</div>
                </div>
              </div>
              <!-- </template> -->
              <!-- </el-collapse-item>
              </el-collapse> -->
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
      <el-col :span="14" style="margin-left:40px">
        <el-row :gutter="12" justify="start" align="top">
          <el-col :span="22">
            <el-form ref="form" :model="form" class="right">
              <el-form-item label="响应命令单：" prop="xymld">
                <el-select v-model="form.xymld" placeholder="请选择" @change="selectChange" style="width:88%">
                  <el-option v-for="item in xymldlist" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="2" class="lookList">
            <el-button size="small" type="primary" @click="toList">查看列表</el-button>
          </el-col>
        </el-row>
        <div class="content_box" v-show="(Object.keys(this.teamList).length > 0)">
          <div class="box_top" @click="checkDuties(teamList.responsibility)">
            <div class="top">{{ teamList.position }}</div>
            <div class="content">
              <el-row :gutter="12" justify="start" align="top">
                <el-col :span="9">
                  <div class="img_box"><img class="InConsultation-titel-icon" src="../../../assets/img/user.png" alt="">
                  </div>
                </el-col>
                <el-col :span="15">
                  <div class="info">
                    <p style="margin-top:40px;color:#ccc"><span
                        style="font-size:28px !important;color:white;margin: 0 25px 0 10px;font-weight: 500;">{{
                          teamList.teamLeader }}</span>{{ teamList.duty }}
                    </p>
                    <p>电话：<span>{{ teamList.contact }}</span></p>
                    <p>单位：<span>{{ teamList.unit }}</span></p>
                    <p>部门：<span>{{ teamList.dept }}</span></p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="box_mid">
            <div class="mid_child" @click="checkDuties(item.responsibility, item)"
              v-for="(item, index) in teamList.groupUsers" :key="index">
              <div class="mid">{{ item.position }}</div>
              <div class="content">
                <div class="mid_top">
                  <div class="img_box">
                    <img class="InConsultation-titel-icon" src="../../../assets/img/user.png" alt="">
                  </div>
                  <div>
                    <div class="name">{{ item.realName }}</div>
                    <div class="position">{{ item.duty }}</div>
                  </div>
                </div>
                <div class="info">
                  <p>电话：<span>{{ item.phone }}</span></p>
                  <p>单位：<span>{{ item.orgName }}</span></p>
                  <p>部门：<span>{{ item.dept }}</span></p>
                </div>
              </div>
            </div>
          </div>
          <div class="box_bottom"></div>
        </div>
        <div class="tail" v-show="(Object.keys(this.teamList).length > 0)">
          <p style="text-indent: 2em;color:white;font-size:17px !important;padding:10px 10px">工作职责：
            {{ teamList.jobResponsibilities }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import { selectResponseList, indexDetail } from "@/api/EmergencyDisposal/yjzhb";
export default {
  name: "Emheadquarters",
  data() {
    return {
      headquartersLv: "",
      flag: false,
      title: "",
      // 集合
      teamList: {},
      list: [],
      xymldlist: [],
      form: {
        xymld: ""
      },
      active: "",
      activeNames: [],
      num: 0
    };
  },
  created() {
    this.getCommand();
  },
  methods: {
    toList() {
      this.$router.push({ path: "/Emheadquarterslist" });
    },
    checkDuties(val, item) {
      console.log(item, "?????item");
      if (this.flag) {
        this.$set(this.teamList, "jobResponsibilities", val);
      }
    },
    selectChange(val) {
      console.log(val, "----val");
      this.getDetail(val);
    },
    // 获取响应命令单下拉
    getCommand() {
      selectResponseList().then(res => {
        const option = res.map((item) => {
          return {
            label: item.responseName,
            value: item.id
          };
        });
        this.xymldlist = option;
        if (this.xymldlist.length) {
          this.form.xymld = this.xymldlist[0].value;
          this.getDetail(this.xymldlist[0].value);
        }
      });
    },
    getDetail(val) {
      indexDetail({ id: val }).then(res => {
        this.title = res[0].headquartersName;
        this.list = res;
        // 获取详情后默认展示指挥人员数据，并高亮
        if (res.length > 0) {
          this.list.forEach((item) => {
            this.active = item.commandUsers[0].id;
            this.num = item.commandUsers[0].id;
            this.activeNames = [item.headquartersLv, item.commandUsers[0].id];
            this.changeNm(2, item.commandUsers[0].id, item.commandUsers);
          });
        }
      });
    },
    changeNm(num, val, item) {
      const result = {};
      const deepItem = cloneDeep(item);
      console.log(deepItem);
      if (num === 3) {
        this.flag = false;
        const team = item.groupUsers;
        team.forEach(i => {
          i.position = "成员";
        });
        // 组长
        result.teamLeader = item.userName;
        // 组长id
        result.templateId = item.userId;
        // 工作职责
        result.responsibility = item.responsibility;
        result.jobResponsibilities = item.responsibility;
        // 单位
        result.unit = item.unitDept;
        result.dept = item.dept;
        // 电话  position
        result.contact = item.contact;
        result.position = "组长";
        result.duty = item.duty;
        // 成员
        result.groupUsers = team;
        this.teamList = { ...result };
      } else if (num === 2) {
        this.flag = true;
        let newObj = {};
        deepItem.forEach((i, index) => {
          if (i.post === "总指挥") {
            newObj = deepItem.splice(index, 1);
          }
        });
        deepItem.forEach((i) => {
          i.position = i.post;
          // i.duty = i.duty
          i.realName = i.userName;
          i.phone = i.contact;
          i.realName = i.userName;
          i.orgName = i.unitDept;
          // i.deptName = i.unitDept.split("司")[1];
        });
        console.log(newObj, "??????????????newObj");
        // 指挥长
        result.teamLeader = newObj[0].userName;
        // 指挥长id
        result.templateId = newObj[0].userId;
        // 指挥长工作职责
        result.responsibility = newObj[0].responsibility;
        result.jobResponsibilities = newObj[0].responsibility;
        // 指挥长单位
        result.unit = newObj[0].unitDept;
        result.dept = newObj[0].dept;
        // 指挥长电话
        result.contact = newObj[0].contact;
        result.position = newObj[0].post;
        result.duty = newObj[0].duty;
        // 指挥成员
        result.groupUsers = deepItem;
        this.teamList = { ...result };
        console.log(this.teamList, "???????????this.teamList");
      } else if (num === 1) {
        // const title = (this.title).substr(-5);
        // console.log(title, "-----title");
        // console.log(item.headquartersLvName, "-----item.headquartersName");
        // this.title = this.title.replace(title, item.headquartersLvName);
      }
      this.num = val;
    },
    handleNodeClick(data) {
      console.log(data);
    },
    handleChange(val) {
      if (val !== "" && val !== "1") {
        this.active = "";
        this.activeNames1 = [];
      }
      this.active = val;
      // }
      console.log(this.activeNames, "activeNamesactiveNamesactiveNames");
      console.log(val, "?????????????????????");
    },
    handleChange1(val) {
      if (val === "") {
        this.active = "";
      } else {
        this.active = val;
        this.active = val;
      }
      console.log(val, "11111111111111");
      console.log(this.activeNames1, "activeNamesactiveNamesactiveNames11111111111111");
    }
    // getElCoordinate(dom) {
    //   let y = dom.offsetTop;
    //   let x = dom.offsetLeft;
    //   let w = dom.offsetWidth;
    //   let h = dom.offsetHeight;
    //   dom = dom.offsetParent;
    //   return {
    //     top: y,//Y轴坐标
    //     left: x,//X轴坐标
    //     width: w,//元素宽度
    //     height: h//元素高度

    //   };
    // },
    // drawLine() {

    //   return `<div
    //             style='top:${midY}px;left:${(midX - length / 2).toFixed(2)}px;width:${length.toFixed(2)}px;transform:rotate(${deg.toFixed(2)}deg);'>
    //         </div>`;
    // }
  }
};
</script>

<style scoped lang="less">
.InformationList {
  display: flex;
  flex-direction: column;

  .left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;

    :deep(.el-tree) {
      background-color: rgba(0, 0, 0, 0);
      color: white;
      margin-left: 160px;
      margin-top: 40px;
    }

    .title {
      width: 83%;
      color: white;
      font-size: 30px !important;
      font-weight: bold;
      text-align: center;
      margin-right: 15px;
    }

    .operation {
      width: 25px;
      height: 25px;
    }

    .line {
      width: 50px;
      border: 0.5px solid #eee;
      margin: 0 5px;
    }

    .line1 {
      // width: 30px;
      width: 56px;
      height: 0;
      // border: 0.5px solid #eee;
      margin: 0 5px;
    }

    .first_cross_fold {
      width: 500px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.7;
      color: #fff;
      font-size: 16px;
      border-radius: 3px;
    }

    .first_cross_fold:hover {
      border: #a09b67 1px solid;
      background-color: #7faf98 !important;
      box-shadow: 0px 0px 15px 5px #a09b67 inset;
    }

    .third_box {
      margin-left: 68px;
      width: 500px;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .vertical_fold {
        // width: 50px;
        height: 315px;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 3px;
        writing-mode: tb-rl;
        opacity: 0.7;
        color: #fff;
        font-size: 16px;
        border-radius: 3px;
      }

      .vertical_fold:hover {
        border: #a09b67 1px solid;
        background-color: #83ad9b !important;
        box-shadow: 0px 0px 15px 5px #a09b67 inset;
      }
    }
  }

  .tail {
    background-color: rgba(13, 35, 82, 0.6);
    width: 100%;
    height: 100px;
    margin-top: 15px;
  }

  .content_box {
    width: 100%;
    display: flex;
    flex-direction: column;

    .box_top {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .top {
        text-align: center;
        color: #eee;
        font-size: 18px !important;
        line-height: 40px;
        width: 460px;
        height: 35px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: #2396cd 1px solid;
        background-color: rgba(46, 88, 219, 0.5) !important;
        opacity: 0.7;
        box-shadow: 0px 0px 15px 5px #36afff inset;
      }

      .content {
        width: 460px;
        height: 200px;
        background-color: rgba(13, 35, 82, 0.6);
        border: 1px solid transparent;
        cursor: pointer;

        .img_box {
          width: 130px;
          height: 130px;
          border-radius: 10px;
          border: 1px solid rgba(13, 35, 82, 0.6);
          margin: 20px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          letter-spacing: 1px;

          p {
            font-size: 14px;
            color: #ccc;
            margin-top: 10px;
          }

          span {
            font-size: 14px;
            color: white;
          }
        }
      }
    }

    .box_mid {
      width: 100%;
      display: flex;
      // justify-content: space-between;
      flex-wrap: nowrap;
      overflow-x: scroll;

      .mid_child:last-child {
        margin-right: 0px;
      }

      .mid_child {
        width: 350px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        margin-right: 23px;

        .mid {
          text-align: center;
          color: #eee;
          font-size: 18px !important;
          line-height: 40px;
          width: 100%;
          height: 35px;
          border-top-left-radius: 3px;
          border-top-right-radius: 3px;
          border: #2396cd 1px solid;
          background-color: rgba(46, 88, 219, 0.5) !important;
          opacity: 0.7;
          box-shadow: 0px 0px 15px 5px #36afff inset;
        }

        .content {
          width: 350px;
          height: 220px;
          background-color: rgba(13, 35, 82, 0.6);
          border: 1px solid transparent;
          cursor: pointer;

          .mid_top {
            width: 100%;
            display: flex;
            align-items: center;

            .img_box {
              width: 85px;
              height: 85px;
              border-radius: 10px;
              border: 1px solid rgba(13, 35, 82, 0.6);
              margin: 10px 20px 10px 20px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .name {
              color: #eee;
              font-size: 26px;
              margin-left: 30px;
            }

            .position {
              color: #eee;
              font-size: 14px;
              margin-left: 30px;
              margin-top: 10px;
            }
          }

          .info {
            width: 100%;
            flex-direction: column;
            display: flex;
            align-items: center;
            letter-spacing: 1px;

            p {
              font-size: 14px;
              width: 65%;
              color: #ccc;
              margin-top: 10px;
            }

            span {
              font-size: 14px;
              color: white;
            }
          }
        }
      }
    }
  }

  // .card {
  //   width: 500px;
  //   height: 300px;
  //   .top {
  //     text-align: center;
  //     color: white;
  //     font-size: 18px !important;
  //     line-height: 50px;
  //     width: 500px;
  //     height: 50px;
  //     background-color: rgba(0, 127, 207, 0.325490196078431);
  //   }
  //   .content {
  //     width: 500px;
  //     height: 250px;
  //     background-color: rgba(13, 35, 82, 0.6);
  //     img {
  //       width: 80%;
  //       margin-left: 40px;
  //       margin-top: 20px;
  //       height: 80%;
  //     }
  //     .info {
  //       p {
  //         color: #ccc;
  //         margin-top: 10px;
  //       }
  //       span {
  //         color: white;
  //         margin-left: 10px;
  //       }
  //     }
  //   }
  // }
  // .card1 {
  //   margin-top: 30px;
  //   width: 400px;
  //   height: 300px;
  //   .top1 {
  //     text-align: center;
  //     color: white;
  //     font-size: 18px !important;
  //     line-height: 50px;
  //     width: 400px;
  //     height: 50px;
  //     background-color: rgba(0, 127, 207, 0.325490196078431);
  //   }
  //   .content1 {
  //     width: 400px;
  //     height: 250px;
  //     background-color: rgba(13, 35, 82, 0.6);
  //     img {
  //       width: 60%;
  //       margin-left: 40px;
  //       margin-top: 20px;
  //       height: 60%;
  //     }
  //     .info {
  //       margin-top: 40px;
  //       p {
  //         color: #ccc;
  //         margin-top: 10px;
  //       }
  //       span {
  //         color: white;
  //         margin-left: 10px;
  //       }
  //     }
  //   }
  // }

  .right {
    :deep(.el-form-item__label) {
      color: white;
      font-size: 18px !important;
      padding: 0;
    }

    :deep(.el-input__inner) {
      border-radius: 5px;
      color: #fff;
      font-size: 16px !important;
      font-weight: 600 !important;
      opacity: 0.7;
      border: #2396cd 1px solid;
      background-color: rgba(46, 88, 219, 0.5) !important;
      box-shadow: 0px 0px 15px 5px #36afff inset;
    }
  }

  :deep(.el-dialog__header) {
    padding: 10px 10px 10px 10px;
    background-color: #5077ff;
  }

  :deep(.el-dialog__close) {
    color: #fff;
  }

  :deep(.el-dialog__headerbtn) {
    top: 5px;
    font-size: 30px;
    color: #fff;
  }

  :deep(.el-dialog__title) {
    font-size: 15px;
    color: #fff;
  }

  .InformationList-center {
    height: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 15px;
    position: relative;

    .InformationList-form {
      width: 100%;

      .QueryAndReset_btn {
        position: absolute;
        right: 1%;
      }
    }

    .InformationList-table-pag {
      float: right;
      position: absolute;
      right: 1%;
      bottom: 2%;

      >div {
        line-height: 32px;
      }
    }

    .InformationList-table {
      width: 100%;
      height: 75%;
      overflow-y: auto;
      margin-top: 20px;
    }

    .list {
      position: relative;
      left: 45%;
    }
  }
}

:deep(.el-input--suffix .el-input__inner) {
  padding-right: 13px;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

:deep(.el-breadcrumb) {
  font-size: 16px;
  line-height: initial;
}

:deep(.el-dialog__footer) {
  padding: 0px 0px 10px 0px;
  text-align: center;
}

:deep(.el-input__inner) {
  background-color: transparent !important;
  border: #3270ff 1px solid;
  border-radius: 5px;
  color: #fff;
  font-size: 16px !important;
  font-weight: 600 !important;
  box-shadow: 3px 3px 20px 5px #2396cd inset;
}

:deep(.el-collapse-item__header) {
  background-color: transparent;
  border: none;
}

:deep(.el-collapse-item__wrap) {
  background-color: transparent;
  border: none;
  margin-left: 20px;
}

:deep(.el-collapse) {
  border: none !important;
}

:deep(.el-collapse-item__content) {
  padding-bottom: 10px;
}

:depp(.el-collapse-item__arrow) {
  display: none !important;
}

:deep(.el-collapse-item__arrow) {
  display: none;
}

.bgc {
  border: #a09b67 1px solid;
  // background-color: #83ad9b !important;
  background-color: #7faf98 !important;
  box-shadow: 0px 0px 15px 5px #a09b67 inset;
}

.bgc1 {
  border: #2396cd 1px solid;
  background-color: rgba(46, 88, 219, 0.5) !important;
  box-shadow: 0px 0px 15px 5px #36afff inset;
}

.lookList {
  :deep(.el-button--primary) {
    border: none;
    height: 40px;
  }
}

:deep(.el-icon-remove-outline) {
  width: 30px;
  height: 30px;
}

/* 1,滚动条 */
::-webkit-scrollbar {
  height: 8px !important;
  /* 横向滚动条 高度 */
  width: 0 !important;
}

div::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: transparent;
}

div::-webkit-scrollbar-track {
  background-color: transparent;
}

::v-deep :not(:last-child).el-collapse-item {
  position: relative;
  overflow: inherit;

  &::after {
    position: absolute;
    content: ".";
    width: 1px;
    background: #fff;
    top: 40px;
    left: 11px;
    bottom: -8px;
  }
}
</style>
